<script setup lang="ts">
import { useEcharts } from '@hooks/useChart'
import type { EChartsCoreOption } from 'echarts/core'
import { ref, Ref, onMounted } from 'vue'
import { hostSales as Enum } from '@/contants/home'
import {EChartsType} from 'echarts';
const emits = defineEmits(['clickBar'])

const disChannel: Ref<null | HTMLElement> = ref(null)
const init = () => {
  const options: EChartsCoreOption = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '0',
      left: '10px',
      right: '35px',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        fontSize: 14
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(0,0, 0,0.2)'
        }
      },
      type: 'value',
      name: '万'
    },
    yAxis: [
      {
        type: 'category',
        min: 0,
        axisTick: {
          show: false
        },
        data: ['花卉', '玩具', '男装', '宠物', '鞋子', '童装', '手机', '化妆品', '女装'],
        splitNumber: 5,
        axisLabel: {
          show: true
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#5475c8'
          }
        }
      }
    ],
    series: [
      {
        name: '累销（w）',
        type: 'bar',
        barWidth: 15,
        label: {
          show: false,
          position: 'insideRight'
        },
        itemStyle: {
          // color: "rgb(59, 161, 148)",
          color: function (params: any) {
            var colorList = [
              'rgb(243, 207, 29)',
              'rgb(243, 207, 29)',
              'rgb(243, 207, 29)',
              'rgb(248,155,140)',
              'rgb(248,155,140)',
              'rgb(248,155,140)',
              'rgb(58,159,147)',
              'rgb(58,159,147)',
              'rgb(58,159,147)'
            ]
            return colorList[params.dataIndex]
          },
          borderRadius: [8, 8, 8, 8]
        },
        data: [
          {
            value: 30,
            type: Enum['花卉'],
            id: 1
          },
          {
            value: 54,
            type: Enum['玩具'],
            id: 2
          },
          {
            value: 60.1,
            type: Enum['男装'],
            id: 3
          },
          {
            value: 72.7,
            type: Enum['宠物'],
            id: 4
          },
          {
            value: 78.5,
            type: Enum['鞋子'],
            id: 5
          },
          {
            value: 86.2,
            type: Enum['童装'],
            id: 6
          },
          {
            value: 90.8,
            type: Enum['手机'],
            id: 7
          },
          {
            value: 99.1,
            type: Enum['化妆品'],
            id: 8
          },
          {
            value: 103.1,
            type: Enum['女装'],
            id: 9
          }
        ]
      }
    ]
  }
  const charts = useEcharts(disChannel.value as HTMLElement, options) as unknown as EChartsType
  charts.on('click', (bar: any) => {
    emits('clickBar', bar.data.type)
  })
}
onMounted(init)
</script>
<template>
  <div
    ref="disChannel"
    :style="{
      width: '95%',
      height: '100%'
    }"
    style="margin: 0 auto"
  ></div>
</template>
<style lang="scss"></style>
